<template>
  <view class="home flex column">
    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh"
      @refresherpulling="onPulling" @refresherrestore="onRestore" @refresherabort="onAbort"
      @scrolltolower="onScrollToLower">
      <view class="container-body">
        <template v-if="unConfirmList && unConfirmList.length">
          <view v-for="(item, index) in unConfirmList" :key="item.id"
            class="u-p-t-20 u-p-l-20 u-p-r-20 u-flex-col u-col-center scroll-card">
            <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 30rpx 10rpx' }"
              :head-style="{ padding: '10rpx 30rpx' }" margin="0rpx 32rpx 0" class="card" :head-border-bottom="false"
              @click="handleCourseClick(item, index)">
              <view slot="head">
                <view class="f-bold u-flex u-col-center u-row-center" :class="item.read ? 'readTitle' : 'title'">
                  <text>{{ item.customerShortName }}</text>
                </view>
              </view>
              <view slot="body">
                <view class="card-row u-p-b-10">
                  <view class="u-flex">
                    <view class="u-font-24 t-red">{{ item.alarmTypeName }}</view>
                  </view>
                  <view class="card-row-title u-m-r-10">{{item.alarmType === '015' ? '预警内容:' : '报警内容:'}}</view>
                  <view class="t-section">{{ item.cdLocation }} {{ item.alarmTypeName }}</view>
                  <template v-if="item.alarmType === '015'">
                    <view class="t-section" v-if="item.cdValue || item.cdValue === 0">预警值：{{ item.cdValue }}{{
                      item.unitCode }}</view>
                  </template>
                  <template v-else>
                    <view class="t-section" v-if="item.maxValue || item.maxValue === 0">
                      最大值：{{ item.maxValue
                      }}{{ item.unitCode }}
                    </view>
                    <view class="t-section" v-if="item.maxTime">最大值时刻：{{ item.maxTime }}</view>
                  </template>
                </view>
              </view>
            </u-card>
          </view>
          <view class="p-t-10 p-b-10">
            <u-loadmore status="nomore" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    currentIndex: Number
  },
  data() {
    return {
      triggered: false, // 下拉刷新
      showEmpty: false,
      unConfirmList: []
    }
  },
  watch: {
    currentIndex(val) {
      this.getData()
    }
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.showEmpty = false
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$get('/realTime/alarm/getUnconfirmedAlarm')
      if (res?.body?.unConfirmAlarm) {
        this.unConfirmList = res.body.unConfirmAlarm
        this.setCount(res.body.count)

        const sum = res.body.unConfirmAlarm.length
        this.$emit('sumChange', sum)
        // 数据空
        if (this.unConfirmList && this.unConfirmList.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    setCount(num) {
      getApp().globalData.list[0].count = num
    },
    /**
     * 查看
     */
    async handleCourseClick(data, index) {
      const params = {
        alarmId: data.alarmId,
        alarmTime: data.beginDate
      }
      if (!data.read) {
        await this.$post('/alarm/confirm/saveReadAlarmNotice', params)
      }
      if (data.alarmType === '015') {
        // go 预警详情
        uni.navigateTo({
          url: `./alarmItemDetail/index?data=${JSON.stringify(data)}`
        })
      } else {
        // go 报警详情
        uni.navigateTo({
          url: `./alarmConfirmDetail/alarmConfirmDetail?data=${JSON.stringify(data)}`
        })
      }
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {},
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {}
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .card {
    width: 100% !important;
  }
  .scroll-card {
    .title {
      color: #ff4229;
    }
    .readTitle {
      color: #2979ff;
    }
  }
}
</style>
